<script setup>
import { ref } from 'vue'
import { rules } from './components/config'
import { getChangePasswordApi } from '@/services/changePassword/changePassword'
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()

const form = ref({ oldPwd: '', newPwd: '', surePwd: '' })
const formRef = ref()
const loading = ref(false)

// 修改密码
const onSubmit = async () => {
  try {
    await formRef.value.validate()
    loading.value = true
    await getChangePasswordApi(form.value)

    setTimeout(function () {
      loading.value = false
    }, 500)
    memberStore.clearProfile()
    memberStore.clearUserInfo()
    setTimeout(function () {
      uni.navigateTo({ url: '/pages/login/login' })
    }, 500)
  } catch (error) {
    setTimeout(function () {
      loading.value = false
    }, 500)
  }
}
</script>

<template>
  <view class="change-password">
    <uni-forms ref="formRef" :modelValue="form" :rules="rules" label-width="80px">
      <uni-forms-item label="旧密码" required name="oldPwd">
        <uni-easyinput v-model="form.oldPwd" placeholder="请输入旧密码" />
      </uni-forms-item>
      <uni-forms-item label="新密码" required name="newPwd">
        <uni-easyinput v-model="form.newPwd" placeholder="请输入新密码" />
      </uni-forms-item>
      <uni-forms-item label="确认密码" required name="surePwd">
        <uni-easyinput v-model="form.surePwd" placeholder="请确认密码" />
      </uni-forms-item>
      <uni-forms-item>
        <view class="form-item">
          <button class="button" :loading="loading" hover-class="button-hover" @click="onSubmit">
            提交
          </button>
        </view>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<style lang="scss">
.uni-forms {
  margin: 50rpx 30rpx;
  .button {
    width: 100%;
    color: #fff;
    border-radius: 50rpx;
    background-color: #108fe5;
    margin-top: 30rpx;
    margin-left: -50rpx;
  }
}
</style>
